<template>
	<div class="gj-container">
		<div class="phonelistWrap">
			<div class="phonelist-content">
				<el-row :gutter="20" class="machine-card">
					<el-col :span="flag?6:0">
						<el-card class="card">
							<div slot="header" class="clearfix"><div class="title">13号加工机生产日报</div></div>
							<div class="body">
								<div class="body-list">
									<div class="body-list-title">SN制造部</div>
									<div>
										<el-form class="machineForm" ref="form" :model="form">
											<el-form-item>
												<div class="userCode">
													<el-input v-model="form.num" placeholder="请输入工号" style="width:80%"></el-input>
													<span style="float:right;margin-top:8px;">号</span>
												</div>
											</el-form-item>
										</el-form>
										<div>
											<el-form class="machineForm" ref="form" label-position="left" :model="form" label-width="22%" style="margin-top:10px;">
												<el-form-item label="日期">
													<div><el-date-picker v-model="value1" type="date" placeholder="选择日期" style="width:89%;"></el-date-picker><i class="el-icon-date"></i></div>
												</el-form-item>
												<el-form-item class="classType" label="班别">
													<div class="classInfo right" style="width: 161px;">
														<div class="classInfoItem" style="margin-left:20px;" v-for="item in classList" @click="changeItem(item.id)">
															<div class="left">{{ item.name }}</div>
															<div class="left"><img :src="selectedIndex == item.id ? selectImg : item.url" /></div>
														</div>
													</div>
												</el-form-item>
											</el-form>
										</div>
										<div>
											<el-form class="machineForm" ref="form" label-position="left" :model="form" >
												<el-form-item label="产品类型" label-width="40%">
													<div>
														<el-select v-model="value" placeholder="产品类型" >
															<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
														</el-select>
													</div>
												</el-form-item>
												<el-form-item label="内装机情况" label-width="50%">
													<el-select v-model="value" placeholder="">
														<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
													</el-select>
												</el-form-item>
											</el-form>
										</div>
									</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<div class="control" @click="handleToggle" :style="flag?'left:calc(25% - 10px)':'left:-20px'"><img class="toggleIcon" src="@/assets/img/iconlr.png" :style="flag?'':'transform: rotate(180deg)'"></div>
					<el-col class="card" :span="flag?4:4">
						<div class="block">
							<ul class="tabs">
								<li class="tabs-item" v-for="(item, index) in tabsData" :key="index" @click="changeTab(item.id)">
									<div class="tabs-item__tail"></div>
									<div class="tabs-item__node">
										<img class="tabs-item__icon" :class="tabSelectedIndex == item.id ? '' : 'untab'" :src="tabSelectedIndex == item.id ? tabSelectImg : item.url" />
									</div>
									<div class="tabs-item__wrapper">
										<div class="tabs-item__content">
											<el-button :type="tabSelectedIndex == item.id ? 'primary' : ''" style="width:240px;height:80px;">{{ item.name }}</el-button>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</el-col>
					<el-col :span="flag?14:20">
						<div class="card">
							<div v-if="tabSelectedIndex == 1"><internalCause></internalCause></div>
							<div v-if="tabSelectedIndex == 2"><externalCause></externalCause></div>
							<div v-if="tabSelectedIndex == 3"><timeMachine></timeMachine></div>
							<div v-if="tabSelectedIndex == 4"><quality></quality></div>
							<div v-if="tabSelectedIndex == 5"><InternalFault></InternalFault></div>
							<div v-if="tabSelectedIndex == 6"><statistics></statistics></div>
							<div v-if="tabSelectedIndex == 7"><heatSealing></heatSealing></div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
import internalCause from './components/internalCause';
import externalCause from './components/externalCause';
import timeMachine from './components/timeMachine';
import quality from './components/quality';
import InternalFault from './components/InternalFault';
import statistics from './components/statistics';
import heatSealing from './components/heatSealing';
export default {
	data() {
		return {
			selectImg: require('@/assets/img/radio.png'),
			tabSelectImg: require('@/assets/img/tabSelected.png'),
			selectedIndex: 1,
			activeName: 1,
			tabSelectedIndex: 1,
			form: {
				num: '10000'
			},
			options: [
				{
					value: '选项1',
					label: '黄金糕'
				},
				{
					value: '选项2',
					label: '双皮奶'
				},
				{
					value: '选项3',
					label: '蚵仔煎'
				},
				{
					value: '选项4',
					label: '龙须面'
				},
				{
					value: '选项5',
					label: '北京烤鸭'
				}
			],
			value: '',
			classList: [
				{
					id: 1,
					url: require('@/assets/img/unradio.png'),
					name: '1'
				},
				{
					id: 2,
					url: require('@/assets/img/unradio.png'),
					name: '2'
				}
			],
			tabsData: [
				{
					id: 1,
					name: '内装机停机内因',
					url: require('@/assets/img/untab.png')
				},
				{
					id: 2,
					name: '内装机停机外因',
					url: require('@/assets/img/untab.png')
				},
				{
					id: 3,
					name: '时间',
					url: require('@/assets/img/untab.png')
				},
				{
					id: 4,
					name: '产品质量',
					url: require('@/assets/img/untab.png')
				},
				{
					id: 5,
					name: '内装机故障明细',
					url: require('@/assets/img/untab.png')
				},
				{
					id: 6,
					name: '使用薄膜量统计',
					url: require('@/assets/img/untab.png')
				},
				{
					id: 7,
					name: '热封条件变更',
					url: require('@/assets/img/untab.png')
				}
			],
			value1: '',
			flag:false,
		};
	},
	components: {
		internalCause,
		externalCause,
		timeMachine,
		quality,
		InternalFault,
		statistics,
		heatSealing
	},
	methods: {
		handleToggle(){
			this.flag = !this.flag;
		},
		changeItem(id) {
			this.selectedIndex = id;
		},
		changeTab(id) {
			this.tabSelectedIndex = id;
		}
	}
};
</script>

<style lang="scss" scoped>
	.machine-card{
		position:relative;
		.control{
			position:absolute;
			right:0px;
			top:0px;
			background:rgba(0,0,0,0.2);
			width: 60px;
			height:90px;
			left:calc(25% - 10px);
			border-radius:0 10px 10px 0px;
			z-index:9999;
			text-align:right;
			line-height:90px;
			.toggleIcon{
				width:19px;
				color:#fff;
				margin-right:15px;
				vertical-align:middle;
			}
		}
	}
.card {
	border-radius: 10px;
	.title {
		color: #666666;
		font-size: 24px;
	}
	.body {
		padding: 0 20px;
		.body-list {
			.body-list-title {
				font-weight: 600;
				margin-left: -10px;
			}
			.classInfo {
				.classInfoItem {
					float: left;
				}
				.classInfoItem .left:nth-child(1) {
					margin-right: 10px;
				}
				.classInfoItem:nth-child(2) {
					margin-left: 20px;
				}
			}
		}
	}
	.tabs {
		margin: 0;
		font-size: 24px;
		list-style: none;
		.tabs-item {
			position: relative;
			padding-bottom: 20px;
			.tabs-item__tail {
				position: absolute;
				left: 11px;
				height: 100%;
				border-left: 2px solid #d2dff4;
				top: 40px;
			}
			.tabs-item__node--normal {
				left: -1px;
				width: 12px;
				height: 12px;
			}
			.tabs-item__node {
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				.tabs-item__icon {
					color: #fff;
					width: 26px;
					margin-top: 30px;
				}
				.untab {
					width: 20px;
				}
			}
			.tabs-item__wrapper {
				position: relative;
				padding-left: 28px;
				top: -3px;
				.tabs-item__content {
					color: #343434;
					margin-left: 28px;
				}
			}
		}
	}
}
</style>
<style scoped>
.machineForm >>> .el-form-item {
	border-bottom: solid 2px #eeeeee;
	padding-bottom: 5px;
}
.machineForm >>> .el-form-item__label {
	font-size: 24px;
	color: #000;
	line-height:60px;
}
.machineForm >>> .el-form-item__content {
	font-size: 24px;
	color: #666666;
}
.machineForm >>> .el-input > input {
	background: #fff;
	font-size: 24px;
}
.collapse >>> .el-collapse-item__header {
	font-size: 24px;
	border-bottom: 2px solid #eee;
	height: 70px;
	line-height: 70px;
}
.collapse >>> .el-collapse-item__content {
	font-size: 24px;
}
.tabs-item__content >>> .el-button {
	padding: 28px 30px !important;
}
.tabs .tabs-item:last-child .tabs-item__tail {
	display: none;
}
.userCode >>> .el-input--large .el-input__inner {
	padding-left: 0px !important;
}
::v-deep .el-input__icon.el-icon-date {
	display: none;
}
.machineForm .classType >>> .el-form-item__label{
	margin-top:-8px;
}
.machineForm >>> .el-input--large .el-input__icon{
	padding-left:0px !important;
}
</style>
